<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">设备维修列表</block>
		</cu-custom>

		<view class="padding-sm solids-bottom " :style="{height: listLoading?'25vh':'20vh'}">
			<view class="flex align-center " style="width: 100%;">
				<view class="flex align-center flex-1">
					<text class="text-bold">开始时间</text>
					<picker class="margin-left-sm solids padding-xs text-grey" mode="date" @change="bindDateChange"
						data-type='createdStartTime' style="width: 50%;">
						<view class="">
							{{searchData.createdStartTime?searchData.createdStartTime:'选择开始时间'}}
						</view>
					</picker>
				</view>
				<view class="flex align-center flex-1">
					<text class="text-bold">结束时间</text>
					<picker class="margin-left-sm solids padding-xs text-grey" mode="date" @change="bindDateChange"
						data-type='createdEndTime' style="width: 50%;">
						<view class="">
							{{searchData.createdEndTime?searchData.createdEndTime:'选择开始时间'}}
						</view>
					</picker>
				</view>
			</view>
			<view class="flex align-center" style="width: 100%;">
				<view class="flex align-center margin-top-sm flex-1">
					<view class="flex align-center flex-1 solid-bottom">
						<text class="text-bold">设备信息</text>
						<view class="margin-left-sm solids padding-xs" style="width: 50%;">
							<input v-model="searchData.keyWord" class="text-grey" placeholder="请输入" />
						</view>
					</view>
				</view>
				<view class="flex align-center margin-top-sm flex-1">
					<view class="flex align-center flex-1 solid-bottom">
						<text class="text-bold">扫码信息</text>
						<view class="margin-left-sm solids padding-xs" style="width: 50%;">
							<input v-model="searchData.equalKeyWord" class="text-grey" placeholder="请输入" />
						</view>
					</view>
					<text style="transform: scale(1.5)" class=' cuIcon-scan text-black' @click="searchSandCode">
					</text>
				</view>
			</view>
			<view class="flex align-center margin-top-sm">
				<view class="flex-1 text-right">
					<button @click="initData(searchData)" class="cu-btn bg-blue">
						搜索
					</button>
					<button @click="restinitData(searchData)" class="cu-btn bg-yellow margin-left-sm">
						重置
					</button>
				</view>
			</view>
			<view v-if="listLoading" class="flex align-center margin-top-sm">
				<view class="flex align-center justify-center flex-1">
					<block>
						<text class="text-bold margin-right-xs">正在加载中</text>
						<image src="../../static/5-121204193R0-50.gif" style="width: 50rpx;height: 50rpx;"></image>
					</block>
				</view>
			</view>
		</view>

		<scroll-view scroll-y :style="[listLoading?{height:'calc(100vh - ' + CustomBar + 'px  - 35vh)'}
		:{height:'calc(100vh - ' + CustomBar + 'px  - 30vh)'}]" :scroll-top="scrollTop" @scroll="scroll">
			<view v-for="(item,index) in tableData" :key="index" @click="repairDetail(item)">
				<view :data-id="item.repairNo" :data-num='item.nowRepairStep' :data-no="item.equipmentNo"
					style="padding:0 20rpx ;"
					class="bg-grey text-sm shadow-warp full-solids-bottom list_main_item margin-top-sm">
					<view class="flex justify-between align-center">
						<view class="flex-4 ">
							<view class="margin-top-sm text-sm">
								<text class="item-label">工器具名称：</text>
								<text class="">{{item.toolName || '--'}}</text>
							</view>

							<view class="margin-top-sm text-sm">
								<text class="item-label">物料编码：</text>
								<text class="">{{item.materialCode|| '--'}} </text>
							</view>
							<view class="margin-top-sm text-sm">
								<text class="item-label">UTC编码：</text>
								<text class="">{{item.utcCode|| '--'}} </text>
							</view>
							<view class="margin-top-sm text-sm">
								<text class="item-label">出厂编码：</text>
								<text class="">{{item.serialNumber|| '--'}} </text>
							</view>

							<view class="margin-top-sm text-sm">
								<text class="item-label">维修时间：</text>
								<text class="">{{item.repairTime|| '--'}} </text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="flex align-center justify-center" style="position: absolute;bottom: 0;height: 10vh;width: 100%;">
			<wyb-pagination :current="pageNum" :page-items="pageSize" :total-items="total" @change="pageChange" />
		</view>


	</view>
</template>

<script>
	import {
		deepClone
	} from "@/common/base";
	import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue'
	export default {
		data() {
			return {
				bufferData: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				listLoading: false,
				pageNum: 1,
				pageSize: 5,
				total: 0,
				userInfo: this.$helper.userInfo,
				searchData: {
					equalKeyWord: '',
					keyWord: '',
					createdStartTime: '',
					createdEndTime: ''
				},
				noOrderSize: 0,
				orderSize: 0,
				equipmentNo: '',
				searchText: '',
				TabCur: 0,
				TabList: ['未接单', '已接单', '2小时未处理', '生产待确认'],
				tableData: [],
				CustomBar: this.CustomBar,
				formInfo: {}
			}
		},
		components: {
			wybPagination
		},
		onShow() {
			this.initData()
		},
		// mounted() {
		// 	this.initData()
		// },
		methods: {
			initData(aa) {
				var that = this;
				const params = deepClone(aa) || {}
				params.pageNum = that.pageNum
				params.pageSize = that.pageSize
				params.status = '0'
				params.isEnable = '1'
				that.listLoading = true;
				that.$api.postAPI('/tpm/api/repair/list', params).then(res => {
					if (res.code == 0) {
						let resData = res.data.rows;
						that.tableData = resData;
						that.total = res.data.total;
						that.goTop();
					} else {
						that.tableData = [];
						that.total = 0;
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 3000
						});
					}
					that.listLoading = false;
				}).catch(error => {
					that.tableData = [];
					that.total = 0;
					that.listLoading = false;
					uni.showToast({
						title: '服务器异常:' + JSON.stringify(error),
						icon: 'none',
						duration: 3000
					});
				})
			},

			repairDetail(row) {
				uni.navigateTo({
					url: '/pages/index/index' + '?rowKey=' + row.id
				})

			},

			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			pageChange(e) {
				var that = this;
				console.log(e);
				that.pageNum = e.current;
				that.initData(that.searchData);
			},
			bindDateChange(e) {
				var that = this;
				let operTime = [];
				let value = e.detail.value;
				let type = e.currentTarget.dataset.type;
				that.searchData[type] = value;
				that.$forceUpdate();
			},
			restinitData() {
				var that = this;
				that.pageNum = 1;
				that.pageSize = 20;
				that.searchData = {
					equipmentNo: '',
					equipmentType: ''
				};
				that.initData();
			},
			searchSandCode() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						that.searchData.equalKeyWord = res.result.replace(/\n/g, '');
					}
				});
			}
		}
	}
</script>

<style>
	.search-input {
		margin-left: 30upx;
		border: 2upx solid #333333;
		width: 70%;
		border-radius: 25upx;
		padding: 10upx;
		font-size: 24rpx;
	}

	.list_main_item {
		width: 720rpx;
	}

	.list_main_item {
		width: 720rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}

	.big-type-line {
		width: 185rpx;
		height: 8rpx;
		border-radius: 15rpx;
	}

	.content-s {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.btn-wrap {
		width: 180upx;
		height: 100upx;
		border-radius: 16upx;
		border: 2upx solid #333333;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-label {
		font-weight: bold;
	}
</style>